<template>
	<view class="item" @tap="goToTaskDetail">
		<!-- 任务主体内容区域 左右布局-->
		<!-- 文章标题 -->
		<view class="title">
			{{title}}
		</view>
		<view class="content">
			<!-- 左侧任务信息 -->
			<!-- 	<view class="cover">
				<image class="img"
					src="../../static/img/huoyuan.png">
				</image>
			</view> -->
			<!-- 右侧任务信息 -->
			<view class="info">
				<!-- 任务摘要 -->
				<view class="abstract">
					{{description}}
				</view>
				<view class="tips">
					<view class="data">{{handleTime}}</view>
					<view class="">
						<u-button type="primary" text="任务详情" size="mini" :customStyle="customStyles" color="#7A7A7A">
						</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyles: {
					width: '70px',
				}
			};
		},
		props: {
			title: {
				type: String
			},
			description: {
				type: String
			},
			createTime: {
				type: String
			},
			id: {
				type: String
			}
		},
		methods: {
			goToTaskDetail() {
				uni.navigateTo({
					url: "/pages/task/taskDetail?id=" + this.id
				})
			}
		},
		computed: {
			handleTime() {
				// 分割取T前面
				let time = this.createTime.split('T')
				return time[0]
			}
		}
	}
</script>

<style lang="scss">
	.item {
		padding: 30rpx;
		border-bottom: 2rpx solid #dbe7f8;

		// 文章标题
		.title {
			padding-bottom: 30rpx;
			@include conent-title(32rpx, 700)
		}

		.content {
			// display: flex;
			// justify-content: space-between;

			// .cover {
			// 	width: 140rpx;
			// 	height: 154rpx;

			// 	.img {
			// 		width: 100%;
			// 		height: 100%;
			// 		border-radius: 4rpx;
			// 	}
			// }

			.info {
				// width: calc(100% - 160rpx);

				.abstract {
					height: 100rpx;
					color: $bsin-abstract;
					@include text-ellipsis(3);
				}

				.tips {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 14rpx;

					.data {
						color: $bsin-color-data;
					}
				}
			}
		}
	}
</style>
